// 科技感主题样式
// 全局CSS变量
:root {
  // 渐变色
  --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --warning-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  --danger-gradient: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
  
  // 背景色 - 改为白色主题
  --dark-bg: #ffffff;
  --darker-bg: #f8f9fa;
  --card-bg: rgba(255, 255, 255, 0.95);
  --card-hover-bg: rgba(248, 249, 250, 0.95);
  
  // 文字颜色 - 改为黑色主题
  --text-primary: #1a1a1a;
  --text-secondary: #666666;
  --text-muted: #999999;
  
  // 强调色
  --accent-cyan: #00f2fe;
  --accent-green: #43e97b;
  --accent-purple: #667eea;
  --accent-pink: #f093fb;
  
  // 边框和阴影 - 改为白色主题
  --border-color: rgba(0, 0, 0, 0.1);
  --border-hover: rgba(102, 126, 234, 0.3);
  --glow-color: rgba(102, 126, 234, 0.2);
  --shadow-dark: 0 8px 32px rgba(0, 0, 0, 0.1);
  --shadow-glow: 0 0 20px rgba(102, 126, 234, 0.1);
  
  // 间距
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  
  // 圆角
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  
  // 动画
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

// 全局背景 - 改为白色渐变
.tech-background {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 50%, #e9ecef 100%);
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

// 全局文字颜色覆盖 - 改为黑色文字
body, html {
  color: var(--text-primary);
  background: #ffffff;
}

// 基础文字颜色覆盖
.app-container {
  color: var(--text-primary);
}

// 保持某些元素的特殊颜色 - 这些需要保持!important
.el-button--primary, .el-button--success, .el-button--warning, .el-button--danger {
  color: white !important;
}

// 链接颜色
a, .el-link {
  color: var(--accent-cyan) !important;
}

// 输入框相关修复 - 白色主题
.el-input {
  .el-input__inner, .el-input__wrapper {
    color: var(--text-primary);
    background: #ffffff;
    border-color: var(--border-color);
    
    &::placeholder {
      color: var(--text-secondary);
    }
  }
  
  input, textarea {
    color: var(--text-primary);
    background: #ffffff;
    
    &::placeholder {
      color: var(--text-secondary);
    }
  }
}

// 下拉选择器修复 - 白色主题
.el-select {
  .el-input__inner, .el-input__wrapper {
    color: var(--text-primary);
    background: #ffffff;
  }
  
  .el-select__placeholder {
    color: var(--text-secondary);
  }
}

// Element Plus 表格组件样式
.el-table {
  color: var(--text-primary);
  background: transparent;
  
  .el-table__header {
    color: var(--text-primary);
    background: #f8f9fa;
    
    th, .cell {
      color: var(--text-primary);
    }
  }
  
  .el-table__body {
    color: var(--text-primary);
    background: #ffffff;
    
    td, .cell {
      color: var(--text-primary);
    }
  }
  
  td, th, .cell {
    color: var(--text-primary);
    border-color: var(--border-color);
  }
  
  .el-table__empty-text {
    color: var(--text-primary);
  }
  
  .el-empty__description {
    color: var(--text-primary);
  }
}

.el-form-item__label {
  color: var(--text-primary);
}

.el-input__inner {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--border-color);
}

.el-select .el-input__inner {
  color: var(--text-primary);
}

.el-pagination {
  .el-pagination__total,
  .el-pagination__jump,
  .btn-prev,
  .btn-next,
  .el-pager li {
    color: var(--text-primary);
  }
}

.el-card {
  background: #ffffff;
  border-color: var(--border-color);
  color: var(--text-primary);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  
  .el-card__header {
    color: var(--text-primary);
    border-color: var(--border-color);
    background: #f8f9fa;
  }
  
  .el-card__body {
    color: var(--text-primary) !important;
  }
}

.el-dialog {
  background: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  
  .el-dialog__header {
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
  }
  
  .el-dialog__body {
    color: var(--text-primary) !important;
  }
}

// 更多Element Plus组件样式覆盖
.el-dropdown-menu {
  background: #ffffff !important;
  border-color: var(--border-color) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  
  .el-dropdown-menu__item {
    color: var(--text-primary) !important;
    
    &:hover {
      background: #f8f9fa !important;
      color: var(--accent-purple) !important;
    }
  }
}

.el-message-box {
  background: var(--card-bg) !important;
  border-color: var(--border-color) !important;
  
  .el-message-box__header {
    color: var(--text-primary) !important;
  }
  
  .el-message-box__content {
    color: var(--text-primary) !important;
  }
}

.el-tooltip__popper {
  background: var(--card-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

.el-popover {
  background: var(--card-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

.el-date-picker {
  background: var(--card-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

.el-picker-panel {
  background: var(--card-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

.el-select-dropdown {
  background: #ffffff !important;
  border-color: var(--border-color) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  
  .el-select-dropdown__item {
    color: var(--text-primary) !important;
    
    &:hover {
      background: rgba(102, 126, 234, 0.1) !important;
    }
  }
}

.el-loading-mask {
  background: rgba(30, 33, 57, 0.8) !important;
  
  .el-loading-text {
    color: var(--text-primary) !important;
  }
}

// 通用文字颜色类
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted { color: var(--text-muted) !important; }

// 动态背景动画
.bg-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.bg-circle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
  animation: float 6s ease-in-out infinite;

  &.circle-1 {
    width: 300px;
    height: 300px;
    top: 10%;
    left: 10%;
    animation-delay: 0s;
  }

  &.circle-2 {
    width: 200px;
    height: 200px;
    top: 60%;
    right: 15%;
    animation-delay: 2s;
  }

  &.circle-3 {
    width: 150px;
    height: 150px;
    bottom: 20%;
    left: 50%;
    animation-delay: 4s;
  }
}

// 动画定义
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-20px) rotate(5deg); }
  66% { transform: translateY(-10px) rotate(-5deg); }
}

@keyframes pulse {
  0% { box-shadow: 0 0 10px var(--accent-cyan); }
  50% { box-shadow: 0 0 20px var(--accent-cyan), 0 0 30px var(--accent-cyan); }
  100% { box-shadow: 0 0 10px var(--accent-cyan); }
}

@keyframes slideInUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

// 通用卡片样式
.tech-card {
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  position: relative;
  overflow: hidden;
  transition: all var(--transition-normal);

  &:hover {
    border-color: var(--border-hover);
    background: var(--card-hover-bg);
    transform: translateY(-2px);
    
    .card-glow {
      opacity: 0.5;
    }
  }

  .card-glow {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: var(--primary-gradient);
    border-radius: var(--radius-lg);
    opacity: 0;
    z-index: -1;
    transition: opacity var(--transition-normal);
    filter: blur(8px);
  }

  .card-border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--radius-lg);
    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
    opacity: 0;
    transition: opacity var(--transition-normal);
  }

  &:hover .card-border {
    opacity: 1;
  }
}

// 按钮样式
.tech-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
  text-decoration: none;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left var(--transition-slow);
  }

  &:hover::before {
    left: 100%;
  }

  &:hover {
    transform: translateY(-2px);
  }

  &.primary {
    background: #007bff;
    color: white;
    border: 1px solid #007bff;

    &:hover {
      background: #0056b3;
      border-color: #0056b3;
      box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
    }
  }

  &.secondary {
    background: #6c757d;
    color: white;
    border: 1px solid #6c757d;

    &:hover {
      background: #545b62;
      border-color: #545b62;
      box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
    }
  }

  &.success {
    background: #28a745;
    color: white;
    border: 1px solid #28a745;

    &:hover {
      box-shadow: 0 10px 25px rgba(79, 172, 254, 0.4);
    }
  }

  &.warning {
    background: var(--warning-gradient);
    color: white;

    &:hover {
      background: #1e7e34;
      border-color: #1e7e34;
      box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
    }
  }

  &.danger {
    background: var(--danger-gradient);
    color: white;

    &:hover {
      box-shadow: 0 10px 25px rgba(255, 107, 107, 0.4);
    }
  }

  &.outline {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    backdrop-filter: blur(10px);

    &:hover {
      border-color: var(--accent-purple);
      background: rgba(102, 126, 234, 0.1);
    }
  }
}

// 输入框样式
.tech-input {
  :deep(.el-input__wrapper) {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    transition: all var(--transition-normal);

    &:hover {
      border-color: var(--border-hover);
    }

    &.is-focus {
      border-color: var(--accent-purple);
      box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
    }

    .el-input__inner {
      color: var(--text-primary);
      background: transparent;

      &::placeholder {
        color: var(--text-secondary);
      }
    }
  }
}

// 选择器样式
.tech-select {
  :deep(.el-select__wrapper) {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    transition: all var(--transition-normal);

    &:hover {
      border-color: var(--border-hover);
    }

    &.is-focus {
      border-color: var(--accent-purple);
      box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
    }

    .el-select__placeholder {
      color: var(--text-secondary);
    }
  }
}

// 表格样式 - 白色主题
.tech-table {
  :deep(.el-table) {
    background: #ffffff;
    color: var(--text-primary);

    .el-table__header {
      background: #f8f9fa;

      th {
        background: #f8f9fa !important;
        color: #495057 !important;
        border: 1px solid #dee2e6;
        font-weight: 600;
      }
    }

    .el-table__body {
      tr {
        background: transparent;
        border: none;
        transition: all var(--transition-normal);

        &:hover {
          background: #f8f9fa !important;
          transform: scale(1.01);
        }

        td {
          border: none;
          border-bottom: 1px solid var(--border-color);
          color: var(--text-primary);
        }
      }
    }
  }
}

// 标签样式
.tech-tag {
  font-weight: 500;
  border-radius: var(--radius-md);
  border: none;
  backdrop-filter: blur(10px);

  &.success {
    background: rgba(0, 242, 254, 0.2);
    color: var(--accent-cyan);
  }

  &.warning {
    background: rgba(67, 233, 123, 0.2);
    color: var(--accent-green);
  }

  &.danger {
    background: rgba(255, 107, 107, 0.2);
    color: #ff6b6b;
  }

  &.info {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
  }
}

// 分页样式
.tech-pagination {
  :deep(.el-pagination) {
    .el-pagination__total {
      color: var(--text-secondary);
    }

    .el-pager li {
      background: rgba(255, 255, 255, 0.05);
      color: var(--text-secondary);
      border: 1px solid var(--border-color);
      margin: 0 2px;
      border-radius: var(--radius-sm);
      transition: all var(--transition-normal);

      &:hover {
        background: rgba(102, 126, 234, 0.2);
        color: var(--text-primary);
        transform: translateY(-1px);
      }

      &.is-active {
        background: var(--primary-gradient);
        color: white;
        border-color: var(--accent-purple);
        box-shadow: var(--shadow-glow);
      }
    }

    .btn-prev,
    .btn-next {
      background: rgba(255, 255, 255, 0.05);
      color: var(--text-secondary);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-sm);
      transition: all var(--transition-normal);

      &:hover {
        background: rgba(102, 126, 234, 0.2);
        color: var(--text-primary);
        transform: translateY(-1px);
      }
    }
  }
}

// 渐变文字
.gradient-text {
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

// 状态指示器
.status-indicator {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);

  .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-cyan);
    box-shadow: 0 0 10px var(--accent-cyan);
    animation: pulse 2s infinite;
  }

  .status-text {
    color: var(--text-secondary);
    font-size: 12px;
  }
}

// 加载动画
.tech-loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-color);
  border-radius: 50%;
  border-top-color: var(--accent-purple);
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

// 网格布局
.tech-grid {
  display: grid;
  gap: var(--spacing-lg);

  &.cols-2 { grid-template-columns: repeat(2, 1fr); }
  &.cols-3 { grid-template-columns: repeat(3, 1fr); }
  &.cols-4 { grid-template-columns: repeat(4, 1fr); }
  &.auto-fit { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  &.auto-fill { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}

@media (max-width: 768px) {
  .tech-grid {
    &.cols-2,
    &.cols-3,
    &.cols-4 {
      grid-template-columns: 1fr;
    }
  }
}

// 响应式辅助类
.hidden-mobile {
  @media (max-width: 768px) {
    display: none !important;
  }
}

.hidden-desktop {
  @media (min-width: 769px) {
    display: none !important;
  }
}

// 全面的文字颜色修复
div, span, p, h1, h2, h3, h4, h5, h6, 
label, strong, em, small, b, i, 
.el-text, .el-title {
  color: var(--text-primary) !important;
}

// 特殊元素颜色保持
.el-message, .el-notification {
  .el-message__content, .el-notification__content {
    color: var(--text-primary) !important;
  }
}

// 下拉选择器文字
.el-select-dropdown__item {
  color: var(--text-primary) !important;
  
  &:hover {
    color: var(--text-primary) !important;
  }
}

// 日期选择器
.el-date-picker, .el-picker-panel {
  .el-date-table td {
    color: var(--text-primary) !important;
  }
  
  .el-picker-panel__content {
    color: var(--text-primary) !important;
  }
}

// 树形控件
.el-tree {
  background: transparent !important;
  
  .el-tree-node__content {
    color: var(--text-primary) !important;
  }
}

// 更多通用覆盖
.el-descriptions {
  .el-descriptions__label,
  .el-descriptions__content {
    color: var(--text-primary) !important;
  }
}

.el-statistic {
  .el-statistic__head,
  .el-statistic__content {
    color: var(--text-primary) !important;
  }
}

.el-tabs {
  .el-tabs__item {
    color: var(--text-secondary) !important;
    
    &.is-active {
      color: var(--accent-purple) !important;
    }
  }
}

.el-steps {
  .el-step__title,
  .el-step__description {
    color: var(--text-primary) !important;
  }
}

// 超级强制的全局文字颜色修复 - 放在最后确保优先级
body, html, #app {
  * {
    color: var(--text-primary) !important;
  }
}

// 针对所有可能的文字元素
div, span, p, h1, h2, h3, h4, h5, h6, 
a, label, input, textarea, select, option,
li, td, th, dt, dd, pre, code, 
.el-text, .el-title, .el-link, .el-descriptions-item__label,
.el-descriptions-item__content, .el-form-item__label,
.el-input__inner, .el-textarea__inner, .el-select__input,
.el-option, .el-dropdown-menu__item, .el-menu-item,
.el-submenu__title, .el-breadcrumb__item, .el-tabs__item,
.el-table .cell, .el-table__empty-text, .el-pagination__total,
.el-pager li, .btn-prev, .btn-next {
  color: var(--text-primary) !important;
}

// 输入框占位符
input::placeholder, textarea::placeholder, 
.el-input__inner::placeholder, .el-textarea__inner::placeholder {
  color: var(--text-secondary) !important;
}

// 禁用状态的文字
.is-disabled, .el-input.is-disabled .el-input__inner {
  color: var(--text-muted) !important;
}

// 确保搜索框和所有输入框的文字可见 - 白色主题
.el-input, .el-select, .el-textarea, .el-autocomplete,
.el-date-picker, .el-time-picker, .el-cascader {
  input, textarea, .el-input__inner, .el-textarea__inner {
    color: var(--text-primary) !important;
    background: #ffffff !important;
    border: 1px solid var(--border-color) !important;
    
    &::placeholder {
      color: var(--text-secondary) !important;
    }
  }
}

// Element Plus 按钮样式重写
.el-button {
  &.el-button--primary {
    background: #007bff !important;
    border-color: #007bff !important;
    color: white !important;
    
    &:hover, &:focus {
      background: #0056b3 !important;
      border-color: #0056b3 !important;
    }
  }
  
  &.el-button--success {
    background: #28a745 !important;
    border-color: #28a745 !important;
    color: white !important;
    
    &:hover, &:focus {
      background: #1e7e34 !important;
      border-color: #1e7e34 !important;
    }
  }
  
  &.el-button--info {
    background: #6c757d !important;
    border-color: #6c757d !important;
    color: white !important;
    
    &:hover, &:focus {
      background: #545b62 !important;
      border-color: #545b62 !important;
    }
  }
  
  &.el-button--warning {
    background: #ffc107 !important;
    border-color: #ffc107 !important;
    color: #212529 !important;
    
    &:hover, &:focus {
      background: #e0a800 !important;
      border-color: #e0a800 !important;
    }
  }
  
  &.el-button--danger {
    background: #dc3545 !important;
    border-color: #dc3545 !important;
    color: white !important;
    
    &:hover, &:focus {
      background: #c82333 !important;
      border-color: #c82333 !important;
    }
  }
  
  // 默认按钮
  &.el-button--default {
    background: #ffffff !important;
    border-color: #dee2e6 !important;
    color: #495057 !important;
    
    &:hover, &:focus {
      background: #f8f9fa !important;
      border-color: #adb5bd !important;
      color: #495057 !important;
    }
  }
}

// 最后的保险措施 - 使用最高优先级
* {
  &:not(.el-button):not(.el-tag):not(.el-badge):not(.el-alert):not(.el-progress__text) {
    color: var(--text-primary) !important;
  }
} 